Internet Explorer 8 Messing with HTML in advanced template!

[dZi]

My site has been looking great on all popular browsers. Then comes IE8 and ruins my menu and header. I've had to modify my header so my Search form would integrate with my design. I create the header in fireworks. Then I end up deleting the HTML that originally has a Search Form Image and I replace it with code for the form that works with shopsite's product search function.

Here is the link to my header. It works fine in Firefox or Safari and even IE7.
http://www.tibetcollectionws.com/menu622/menu622.htm

Notice the difference between IE8 and Firefox. What did they do to their browser? IE8 creates this big gap between the logo. What creates the gap in IE8 is when I take out the following code:

Code: Select all

<td colspan="5"><img name="menugfxsfield" src="/menu622/menugfxsfield.gif" width="188" height="16" border="0" id="menugfxsfield" alt="" /></td>

And I replace it with the following to make it a real search field:

Code: Select all

<td width="186" height="15" colspan="5"><form action="http://tibetcollectionws.com/cgi-tibetcollectionws/sb/productsearch.cgi?storeid=*2c6a67e1a9bd7166bfccf22c7179f74b8d0014ba4e9b4b82" method="post"><input name="search_field" type="text" id="search" style=" background-color: #ffffff; border: 1px solid #999999; padding: 0px 0px; width:184px; height:13px; "><input type=hidden name="storeid" value="*2c6a67e1a9bd7166bfccf22c7179f74b8d0014ba4e9b4b82"/></td>

Note: I also shed two pixels from both the width and the height of the field so it fits better in the design. Either way IE8 is consistently messed up if I take out the image and replace with a field. It just can't keep the images together for some reason.

I hope this helps someone else as well with an advanced template such as this. IE8 might be causing other conflicts as well and unfortunately by next year it will probably become atleast 60% of the Browser share.

Thanks in advance!

[dZi]

Well...Microsoft has a temporary fix for IE8 compatibility issues:

Update your site to render in IE7 Mode

You may experience one of the following issues when you use Internet Explorer 8:

*

Misaligned webpage layout
*

Overlapping text or images
*

JavaScript functionality issues and errors

These issues may occur because Internet Explorer 8 displays webpages using "Standards mode" by default, whereas most current webpages are created and tested to work with Internet Explorer 7 Standards mode.

Getting Internet Explorer 8 to always render a site or page like Internet Explorer 7 can be done by simply adding a tag. No additional changes are required.

There are two options for doing this:

1.

On a per-site basis
The site owner can add the HTTP header:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

2.

On a per-page basis
The site owner can add a special HTML tag to each document, right after the tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

The meta tag retains Internet Explorer 7 rendering behavior while still accessing all Internet Explorer 8 has to offer. This allows your site visitors who are using Internet Explorer 8 a seamless experience while you work behind the scenes to update your web properties. When your site is updated to render in Internet Explorer 8, you can remove the tag or continue to leverage the tag functionality, as it will remain as part of Internet Explorer 8 upon final release.

Note: Adding the Internet Explorer 7 compatibility tag should address most display issues. However, browser detection may also have to be updated on your site. To learn more, please read about the User-Agent String and Version Vector.

For more information on this specific meta tag update please see Some Web sites may not be displayed correctly or work correctly in Windows Internet Explorer 8. Other compatibility options are described in Internet Explorer Compatibility.

[Jim]

I'm not sure whose "standards" they are using since Firefox and other mozilla based browsers also claim to be standards based and they work.